<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <link rel="stylesheet" href="snapshot.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--axios-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        new Vue({
          el: '#app',
          data: {
            accounts: [],
            task_boards: [],
            taskboard_filter: {},
            deliveries: [],
            delivery_filter: {},
            per_class_deliver: {},
            task_board_users: [],
            show_panel: 'taskboard',
            user_id: 0,
          },
          mounted() {
              this.load_accounts()

              const query = new URLSearchParams(window.location.search)
              this.user_id = query.get("user_id", 0)
              if(query.has('tab')) {
                this.show_panel = query.get('tab')
              }
              this.taskboard_filter.user_id = this.user_id

              this.switch_panel(this.show_panel)
          },
          methods: {
            switch_panel(panel){
              this.show_panel = panel
              if (panel == 'deliver') {
                this.delivery_filter = {
                    user_id: this.user_id,
                    date: (new Date()).toISOString().split('T')[0],
                    item_name: '',
                    item_class: ''
                }
                this.load_deliveries()
              }
              if (panel == 'taskboard') {
                  this.taskboard_filter = {
                    user_id: this.user_id,
                    date: (new Date()).toISOString().split('T')[0],
                    item_name: '',
                    item_class: '',
                    p_only: false
                  }
                  this.load_task_boards()
              }
            },
            load_accounts(){
              axios.get('api/accounts').then(res => {
                this.accounts = res.data.list;
              })
            },
            get_date_list(){
                const days = []
                const today = new Date();
                for(let i=0; i<7; i++) {
                    const date = new Date()
                    date.setDate(today.getDate() - i)
                    days.push(date.toISOString().split('T')[0])
                }
                console.log(days)
                return days
            },
            load_task_boards() {
              this.task_boards = {}
              axios.get('api/taskboards?date=' + this.taskboard_filter.date).then(res => {
                this.task_boards = []
                res.data.list.forEach(row => {
                  this.task_board_users.push(row.user_id.toString())
                  if (this.taskboard_filter.user_id > 0  && row.user_id != this.taskboard_filter.user_id) {
                    return
                  }
                  if (this.taskboard_filter.item_name !=''  && row.item_name != this.taskboard_filter.item_name) {
                    return
                  }
                  if (this.taskboard_filter.item_class !=''  && row.item_class != this.taskboard_filter.item_class) {
                    return
                  }
                  if (this.taskboard_filter.p_only && row.is_p == 0) {
                    return
                  }
                  this.task_boards.push(row)
                })
              })
            },
            load_deliveries() {
              this.deliveries = {}
              axios.get('api/deliver_list?date=' + this.delivery_filter.date + '&user_id=' + this.delivery_filter.user_id).then(res => {
                this.deliveries = []
                this.per_class_deliver = res.data.per_class
                res.data.list.forEach(row => {
                  if (this.delivery_filter.item_name !=''  && row.item_name != this.delivery_filter.item_name) {
                    return
                  }
                  if (this.delivery_filter.item_class !=''  && row.item_class != this.delivery_filter.item_class) {
                    return
                  }
                  if (this.delivery_filter.p_only && row.is_p == 0) {
                    return
                  }
                  this.deliveries.push(row)
                })
              })
            },
            time_diff(time_str) {
              // 将时间字符串转换为 Date 对象
              const given_time = new Date(time_str);
              // 获取当前时间
              const current_time = new Date();

              // 计算时间差并转换为秒
              return (current_time - given_time) / 1000;
            },
            format_number(number) {
              if (!number) {
                return '-'
              }
              return number.toLocaleString()
            },
            is_vip(user_id) {
              let account = this.accounts[user_id]
              if (account) {
                return account['is_vip']
              } else {
                return false
              }
            },
          }
        });
      })
    </script>
</head>
<body>
<div class="container" id="app">
    <div class="header-row">
        <div class="flex-row pb-10">
            <div class="flex-row pl-20 filter tabbar">
                <button @click="switch_panel('taskboard')" :class="show_panel=='taskboard'?'btn_active':''">未交任务</button>
                <button class="ml-10" @click="switch_panel('deliver')" :class="show_panel=='deliver'?'btn_active':''">
                    已交任务
                </button>
            </div>
        </div>
    </div>
    <div v-if="show_panel=='deliver'">
        <div class="flex-row pb-10 filter" style="display:inline-block; width: auto">
            <div style="padding-top: 10px; font-weight:bold;">用户：</div>
            <div v-for="(account, index) in accounts"  style="display:inline-block; width: auto" >
                <button class="ml-10"  @click="delivery_filter.user_id=index;load_deliveries()"
                    v-if="task_board_users.includes(index.toString())" style="background-color:lightgreen"
                    :class="delivery_filter.user_id==index?'btn_active':''">{{index}}</button>
                <button class="ml-10"  @click="delivery_filter.user_id=index;load_deliveries()"
                    v-else :class="delivery_filter.user_id==index?'btn_active':''">{{index}}</button>
            </div>
        </div>
        <div class="flex-row pb-10 filter">
            <table style="width:50%">
                <thead>
                    <td align="center">类别</td>
                    <td align="center">任务数量</td>
                    <td align="center">Cost</td>
                    <td align="center">P</td>
                </thead>
                <tr v-for="(data, item_class) in per_class_deliver" :key="item_class">
                    <td align="center">
                        <span class="clickable" @click="delivery_filter.item_class=item_class;load_deliveries()"><b>{{item_class}}</b></span>
                    </td>
                    <td align="center">{{data.count}}</td>
                    <td align="center">{{data.cost}}</td>
                    <td align="center">{{data.p_count}}</td>
                </tr>
            </table>
        </div>
        <div class="flex-row pb-10 filter">
          <div style="padding-top: 10px; font-weight:bold;">筛选：</div>
          <button v-if="delivery_filter.item_name !=''" @click="delivery_filter.item_name='';load_deliveries()" class="btn_active ml-10">item_name={{delivery_filter.item_name}}</button>
          <button v-if="delivery_filter.item_class !=''" @click="delivery_filter.item_class='';load_deliveries()" class="btn_active ml-10">item_class={{delivery_filter.item_class}}</button>
          <button v-if="delivery_filter.p_only" @click="delivery_filter.p_only=false;load_deliveries()" class="btn_active ml-10">p_only</button>
        </div>
        <table style="border:1px; width: 80%">
            <thead>
                <td align="center" width="120px">交付时间</td>
                <td align="center" width="50px">位置</td>
                <td align="center" width="50px">物品类别</td>
                <td align="center" width="300px">物品名称</td>
                <td align="center" width="100px">价格</td>
                <td align="center" width="100px">奖励</td>
                <td align="center" width="100px">花费</td>
            </thead>
            <tr v-for="(task, index) in deliveries" :key="index">
                <td align="center"><span>{{task.create_time}}</span></td>
                <td align="center"><span>{{task.position}}</span></td>
                <td align="left">
                    <span class="clickable pl-20" @click="delivery_filter.item_class=task.item_class;load_deliveries()"><b>{{task.item_class}}_{{task.item_tier}}</b></span>
                </td>
                <td class="pl-5">
                  <span class="clickable" :title="task.item_name" @click="delivery_filter.item_name=task.item_name;load_deliveries()">
                      {{task.item_name}}<b style="color:red"> x{{task.qty}}</b>
                  </span>
                </td>
                <td align="center">{{task.item_price}}</td>
                <td align="center">
                    {{task.reward}}
                    <span v-if="task.is_p>0" style="background-color:green; font-size:14px; padding:1px 5px; border-radius:1px"
                     @click="delivery_filter.p_only=true;load_deliveries()">P</span>
                </td>
                <td align="center">{{task.cost}}</td>
            </tr>
        </table>
    </div>
    <div v-if="show_panel=='taskboard'">
        <div v-if="show_panel=='taskboard'">
            <div class="flex-row pb-10 filter" style="display:inline-block; width: auto">
                <div style="padding-top: 10px; font-weight:bold;">用户：</div>
                <div v-for="(account, index) in accounts"  style="display:inline-block; width: auto" >
                    <button class="ml-10"  @click="taskboard_filter.user_id=index;load_task_boards()"
                        v-if="task_board_users.includes(index.toString())" style="background-color:lightgreen"
                        :class="taskboard_filter.user_id==index?'btn_active':''">{{index}}</button>
                    <button class="ml-10"  @click="taskboard_filter.user_id=index;load_task_boards()"
                        v-else :class="taskboard_filter.user_id==index?'btn_active':''">{{index}}</button>
                </div>
            </div>
            <div class="flex-row pb-10 filter">
              <div style="padding-top: 10px; font-weight:bold;">筛选：</div>
              <button v-if="taskboard_filter.p_only" @click="taskboard_filter.p_only=false;load_task_boards()" class="btn_active ml-10">p_only</button>
              <button v-else @click="taskboard_filter.p_only=true;load_task_boards()" class="ml-10">p_only</button>
              <button v-if="taskboard_filter.date !=''" @click="taskboard_filter.date='';load_task_boards()" class="btn_active ml-10">date={{taskboard_filter.date}}</button>
              <button v-if="taskboard_filter.user_id>0" @click="taskboard_filter.user_id=0;load_task_boards()" class="btn_active ml-10">user_id={{taskboard_filter.user_id}}</button>
              <button v-if="taskboard_filter.item_name !=''" @click="taskboard_filter.item_name='';load_task_boards()" class="btn_active ml-10">item_name={{taskboard_filter.item_name}}</button>
              <button v-if="taskboard_filter.item_class !=''" @click="taskboard_filter.item_class='';load_task_boards()" class="btn_active ml-10">item_class={{taskboard_filter.item_class}}</button>

            </div>
            <table style="border:1px; width: 80%">
            <thead>
            <td align="center" width="50px">用户</td>
            <td align="center" width="100px">日期</td>
            <td align="center" width="150px">完成时间</td>
            <td align="center" width="50px">位置</td>
            <td align="center" width="50px">物品类别</td>
            <td align="center" width="300px">物品名称</td>
            <td align="center" width="100px">价格</td>
            <td align="center" width="100px">奖励</td>
            <td align="center" width="100px">花费</td>
            </thead>
            <tr v-for="(task, index) in task_boards" :key="index">
                <td align="center">
                  <span class="clickable" @click="taskboard_filter.user_id=task.user_id;load_task_boards()">
                      <span v-if="is_vip(task.user_id)" style="color:orange; size: 12px">{{task.user_id}}</span>
                      <span v-else>{{task.user_id}}</span>
                  </span>
                </td>
                <td align="center">
                    <span class="clickable" @click="taskboard_filter.game_date=task.game_date;load_task_boards()">
                    {{task.game_date}}</span>
                </td>
                <td align="center"><span>{{task.create_time}}</span></td>
                <td align="center"><span>{{task.position}}</span></td>
                <td align="left">
                    <span class="clickable pl-20" @click="taskboard_filter.item_class=task.item_class;load_task_boards()"><b>{{task.item_class}}_{{task.item_tier}}</b></span>
                </td>
                <td class="pl-5">
                  <span class="clickable" :title="task.item_name" @click="taskboard_filter.item_name=task.item_name;load_task_boards()">
                      {{task.item_name}}<b style="color:red"> x{{task.qty}}</b>
                  </span>
                </td>
                <td align="center">{{task.item_price}}</td>
                <td align="center">
                    {{task.reward}}
                    <span v-if="task.is_p>0" style="background-color:green; font-size:14px; padding:1px 5px; border-radius:1px"
                     @click="taskboard_filter.p_only=true;load_task_boards()">P</span>
                </td>
                <td align="center">{{task.cost}}</td>
            </tr>
        </table>
        </div>
    </div>
</div>
</body>
</html>